@import '@material/dialog/mixins.import';
@import '@material/dialog/variables.import';
@import '../mdc-helpers/mdc-helpers';
@import './mdc-dialog-structure-overrides';
@import '../../cdk/a11y/a11y';

// Dialog content max height. This has been copied from the standard dialog
// and is needed to make the dialog content scrollable.
$mat-dialog-content-max-height: 65vh !default;
// Dialog button horizontal margin. This has been extracted from MDC as they
// don't expose this value as variable.
$mat-dialog-button-horizontal-margin: 8px !default;

@include mdc-dialog-core-styles($query: $mat-base-styles-query);
@include _mdc-dialog-structure-overrides();

// The dialog container is focusable. We remove the default outline shown in browsers.
.mat-mdc-dialog-container {
  outline: 0;

  @include cdk-high-contrast(active, off) {
    outline: solid 1px;
  }
}

// MDC sets the display behavior for title and actions, but not for content. Since we support
// using the `mdc-dialog__content` as custom element, we need to set the element to `block`.
.mat-mdc-dialog-content {
  display: block;
}

.mat-mdc-dialog-actions {
  // For backwards compatibility, actions align at start by default. MDC usually
  // aligns actions at the end of the container.
  justify-content: start;

  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }

  // MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
  // class applied. We can't set this class for projected buttons that consumers of the
  // dialog create. To workaround this, we select all Material Design buttons we know and
  // add the necessary spacing similar to how MDC applies spacing.
  .mat-button-base + .mat-button-base,
  .mat-mdc-button-base + .mat-mdc-button-base {
    margin-left: $mat-dialog-button-horizontal-margin;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: $mat-dialog-button-horizontal-margin;
    }
  }
}

// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
// TODO(devversion): Look into using MDC's Sass queries to separate the animation styles and
// conditionally add them. Consider the size cost and churn when deciding whether to switch.
.mat-mdc-dialog-container._mat-animation-noopable .mdc-dialog__container {
  transition: none;
}
